<template>
  <div class="cotainer">
    <div class="header">驾校管理系统</div>
    <div class="header-t">
      <div class="img-l">
        <img
          src="https://bj.51jiaxiao.com/Public/upload/public/201802/5a753368f317b.png"
          alt
        />
      </div>
      <div><a @click="changeStatus(1)">首页</a></div>
      <div>驾校推荐</div>
      <div>科目练习</div>
      <div>问答社区</div>
      <div>视频</a> </div>
      <div>陪练</div>
      <div class="img-r">
        <img src="../../assets/img/title.png" alt />
      </div>
    </div>
    <div class="maincontainer">
      <div class="aside">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1" @click="changeStatus(1)">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2" @click="changeStatus(2)">
            <i class="el-icon-postcard"></i>
            <span slot="title">驾照信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="changeStatus(3)">
            <i class="el-icon-bicycle"></i>
            <span slot="title">驾校车辆</span>
          </el-menu-item>
          <el-menu-item index="4" @click="changeStatus(4)">
            <i class="el-icon-thumb"></i>
            <span slot="title">课程信息</span>
          </el-menu-item>
          <el-menu-item index="5" @click="changeStatus(5)">
            <i class="el-icon-document"></i>
            <span slot="title">驾校公告</span>
          </el-menu-item>
          <el-menu-item index="6" @click="changeStatus(6)">
            <i class="el-icon-user-solid"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item index="7">
            <div @click="toControl">
              <i class="el-icon-odometer"></i>
              <span slot="title">后台管理</span>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="main">
        <Swiper />
        <Home @getStatus="getStatus" v-if="status == 1" />
        <License v-if="status == 2" />
        <Car v-if="status == 3" />
        <Class v-if="status == 4" />
        <GongG v-if="status == 5" />
        <Zone v-if="status == 6" />
       
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "./swiper.vue";
import Home from "./home.vue";
import License from "./license.vue";
import Car from "./car.vue";
import Class from "./class.vue";
import GongG from "./gongao.vue";
import Zone from "./zone.vue";

import { getInfo } from "@/api/user";

export default {
  data() {
    return { status: 1 };
  },
  components: {
    Swiper,
    Home,
    License,
    Car,
    Class,
    GongG,
    Zone,
   
  },
  methods: {
    toControl() {
      this.$router.push("/");
    },
    getStatus(data) {
      this.status = data;
    },
    changeStatus(e) {
      this.status = e;
    },
    async getuserInfo() {
      let res = await getInfo();
      const {id,username,nickname,phone,role,date,photo,gender} = res.data
      let data ={}
      data.id = id
      data.username = username
      data.nickname = nickname
      data.phone = phone
      data.role = role
      data.date = date
      data.photo = photo
      data.gender = gender
      
      localStorage.setItem("infomation", JSON.stringify(data));
    },
   
  },
  mounted() {
    this.getuserInfo();
  },
};
</script>

<style scoped>
.cotainer {
  box-sizing: border-box;
  width: 100vw;
  background-color: #e6e8e7;
}
.header {
  height: 50px;
  width: 100%;
  background-color: #51a3b9;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
}
.header-t {
  height: 100px;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.maincontainer {
  width: 100%;
  height: 100%;
  display: flex;
}
.aside {
  width: 10%;
  height: 100%;
}
.main {
  width: 90%;
  height: 100%;
}
</style>
